<template>
	<div style="margin-left: 20px;margin-right: 1.25rem;">
		<div class="main_header">
			<div v-for="(Item,index) in List" :class="{active:isActive==Item.title}" @click="Change(Item)" :key="index">{{Item.title}}</div>
		</div>
		<ClassAdmin v-if="activid==1"></ClassAdmin>
		<TeamManagement v-if="activid==2"></TeamManagement>
        <CourseManagement v-if="activid==3"></CourseManagement>
	</div>
</template>

<script>
	import ClassAdmin from "./ClassAdmin.vue"
	import TeamManagement from "./TeamManagement"
	import CourseManagement from "./CourseManagement"
	export default {
		components: {
			ClassAdmin: ClassAdmin,
			TeamManagement:TeamManagement,
			CourseManagement:CourseManagement
		},
		data() {
			return {
				List: [{
						title: "班级管理",
						id: 1
					},
					{
						title: "教师团队管理",
						id: 2
					},
					{
						title: "课程管理",
						id:3
					},
					
				],
				isActive:"班级管理",
				activid:1
			}
		},
		methods:{
			Change(Item)
			{
				this.isActive=Item.title;
				this.activid=Item.id;
			}
		}
	}
</script>

<style scoped="scoped">
	.main_header {
		height: 3.5rem;
		line-height: 3.5rem;
		display: flex;
		/* background-color: #00B8A6; */
	}

	.main_header>div {
		margin-left: 1.875rem;
		margin-right: 1.875rem;
		cursor: pointer;
	}

	.active {
		/* color: #00B8A6; */
		font-size: 1rem;
		border-bottom: 0.1rem #00B8A6 solid ;
		
	}
</style>
